// 必须叫glupfile.js这个名字

// 使用包,在安装之后需要requeri引用,核心包可以直接使用
const gulp = require('gulp'),
	  htmlmin = require('gulp-htmlmin'),
	  cleanCss = require('gulp-clean-css'),
	  babel = require('gulp-babel'),
	  uglify = require('gulp-uglify'),
	  del = require('del'),
	  connect = require('gulp-connect'),
	  sass = require('gulp-sass')

//同一管理各种路径
const paths = {
	html:{
		src:'src/**/*.html',
		dest:'dist'
	},
	css:{
		src:'src/css/**/*.scss',
		dest:'dist/css'
	},
	js:{
		src:'src/js/**/*.js',
		dest:'dist/js'
	},
	img:{
		src:'src/img/**',
		dest:'dist/img'
	},
	libs:{
		src:'src/libs/**',
		dest:'dist/libs'
	}
}


// 制定gulp任务在gulp4以前用task方法例如:gulp.task('html',() => {})

//gulp4制定任务直接写函数,例如：const html = () => {}

// 创建一个html代码压缩的任务:把html文件从src里取出来，压缩代码，再放入dist目录
//为避免文件重复等问题，在创建文件之前，直接先清空dist
const clear = () => del('dist')

//**表示任意层级的任意目录，*表示所有文件

const html = () => {
	return gulp.src(paths.html.src)//取出文件
		.pipe(htmlmin({
			removeComments: true, // 清除HTML注释
			collapseWhitespace: true, // 压缩HTML
			collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
			removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
			removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
			removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
			minifyJS: true, // 压缩页面JS
			minifyCSS: true // 压缩页面CSS 
		}))//压缩任务
		.pipe(gulp.dest(paths.html.dest))//压缩完成后放到目标位置
		.pipe(connect.reload())//任务更新之后重启服务器，保持热更新状态
}

// css任务，压缩css

const css = () => { 
	return gulp.src(paths.css.src)
		   .pipe(sass())
		   .pipe(cleanCss())
		   .pipe(gulp.dest(paths.css.dest))
		   .pipe(connect.reload())
} 

// js任务，先转ES6到ES5再压缩

const js =() => {
	return gulp.src(paths.js.src)
		.pipe(babel({
			presets:['@babel/env']
		}))
		.pipe(uglify())
		.pipe(gulp.dest(paths.js.dest))
		.pipe(connect.reload())
}

//制定img和libs任务:文件移动
const img = () => gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))

// 创建一个服务器的severs任务
const server = () => {
	return connect.server({
		root:'dist',
		port: 520,
		//支持热更新设置为true，可以自动更新页面
		livereload: true
	})
}

//监听任务，watch：监听文件修改，只要文件被改了就自动重启相应的任务
const watch = () => {
	//gulp.watch监听文件修改,当文件被修改了就重启任务,第一个参数是监听修改的地址，第二个参数是重启的任务名字
	gulp.watch(paths.html.src,html)
	gulp.watch(paths.css.src,css)
	gulp.watch(paths.js.src,js)
}


//把gulpfile.js作为一个自定义模块导出任务,这种只能单个导出，也只能单个执行
// module.exports = {
// 	clear,
// 	html,
// 	css,
// 	js,
// 	img,
// 	libs
// }

// default任务,默认任务,我们通过这个任务来一起执行
// gulp.series() 同步执行任务
// gulp.parallel() 异步执行任务
module.exports.default = gulp.series(clear,gulp.parallel(html,css,js,img,libs,server,watch))



